import React,  { useState } from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';


const features = [
  {
    title: '容易上手',
    imageUrl: 'img/jiandankuaijie.svg',
    description: (
      <>
        不需要调用HTTP底层接口，而是像 Dubbo 那样的 RPC 框架一样，只需要定义接口、调用接口即可。10分钟即可完成请求的定义、发送、接收响应、数据解析、错误处理、日志打印等过程。
      </>
    ),
  },
  {
    title: '配置轻量',
    imageUrl: 'img/yumao.svg',
    description: (
      <>
        遵循约定优于配置的原则，只需在需要的时候进行配置，不配置也不会影响Forest请求的正常调用。这样做使得框能够快速上手、使用简单，而又不失灵活。
      </>
    ),
  },
  {
    title: '简单优雅',
    imageUrl: 'img/jiubei.svg',
    description: (
      <>
        将繁复的 HTTP 请求细节封装成 Java 接口 + 注解的形式，不必再关心发送 HTTP 请求的具体过程。使得 HTTP 请求信息与业务代码解耦，方便您优雅地管理大量 HTTP 的 URL、Header、Body 等信息。
      </>
    ),
  },
  {
      title: '扩展灵活',
      imageUrl: 'img/kuozhan.svg',
      description: (
          <>
              允许您自定义拦截器、甚至是自定义注解，以此来扩展Forest的能力，即使面对意想不到的场景，也能将您特定的逻辑封装成一个设计精巧的注解以供您和他人方便使用。
          </>
      ),
  },

];

function Feature({imageUrl, title, description}) {
  const imgUrl = useBaseUrl(imageUrl);
  return (
    <div className={clsx('col col--6', styles.feature)}>
      <div className={styles.header}>
      {imgUrl && (
          <div className={styles.headerIcon}>
              <img className={styles.featureImage} src={imgUrl} alt={title} />
          </div>
      )}
      <h3>{title}</h3>
      </div>
      <p>{description}</p>
    </div>
  );
}


function Home() {
    const context = useDocusaurusContext();
    const {siteConfig = {}} = context;
    const bannerImgUrl = useBaseUrl('img/logo-main.svg');
    const architectureImgUrl = useBaseUrl('img/doc/forest_request_flow_2.svg');
    const converterImgUrl = useBaseUrl('img/wellpaper_converter.svg');
    const annotationsImgUrl = useBaseUrl('img/annotations.svg');

    return (
        <>
    <Layout
      title={`Forest官方网站 - 轻量级HTTP框架`}
      description="Forest是一个高层的、极简的声明式HTTP调用API框架，让Java发送HTTP/HTTPS请求不再难。"
      keywords="forest,forest官网,forest文档,http框架,http client,okhttp,httpclient,java http,fegin,retrofit"
      image="https://forest.dtflyx.com/img/forest-search-logo.png">
      <header className={clsx('hero banner', styles.heroBanner)}>
        <div className="container">
            <div className="row">
            <div className="col col--6">
          {/*<h1 className="hero__title">{siteConfig.title}</h1>*/}
          {/*  <h1 className="banner-title">{siteConfig.title}</h1>*/}
            <h1 className="banner-title">{siteConfig.tagline}</h1>
                <p className="banner-subtitle">
                    {siteConfig.customFields.subtitle}
                </p>
                <p className="banner-last-version">
                    最新版本：
                    <span className="tag-last-version">
                        <a href={siteConfig.customFields.lastVersionUrl}>{siteConfig.customFields.lastVersion}</a>
                    </span>
                </p>
                <div className={styles.buttons}>
              <Link
                  className={clsx(
                      'button button--lg',
                      styles.myButton, styles.startButton,
                  )}
                  to={useBaseUrl('docs/install_guide')}>
                  极速开始
              </Link>
              <Link
                  className={clsx(
                      'button button--secondary button--lg',
                      styles.myButton, styles.giteeButton,
                  )}
                  to={'https://gitee.com/dromara/forest'}>
                  Gitee
              </Link>
              <Link
                  className={clsx(
                      'button button--secondary button--lg',
                      styles.myButton, styles.githubButton,
                  )}
                  to={'https://github.com/dromara/forest'}>
                  GitHub
              </Link>
          </div>
            </div>
            <div className="col col--6">
                <div className="text--center">
                    <img className={styles.bannerImage} src={bannerImgUrl} alt="" />
                </div>
            </div>
          </div>
        </div>
      </header>
      <main>
        <section className={clsx(styles.intros)}>
            <div className="container">
                <div className="row">
                    <div className={styles.starGaze}>
                        <h1>代码托管于GITEE</h1>
                        <h4>* 如果您喜欢<a href="https://gitee.com/dromara/forest">Forest</a>，可以在<a href="https://gitee.com/dromara/forest">Gitee</a>上给个Star *</h4>
                    </div>
                </div>
            </div>
        </section>
        {features && features.length > 0 && (
          <section className={styles.features}>
            <div className="container">
                <div className="row">
                {features.map((props, idx) => (
                        <Feature key={idx} {...props} />
                ))}
                </div>
            </div>
          </section>
        )}
        <section className={styles.intros}>
            <div className="container">
                <div className="row">
                    <div className={clsx('col col--4')}>
                        <div className={styles.introHeader}>
                            <h2>Forest的架构</h2>
                            <p className={styles.introGreenText}>Forest架构大致可以分为两部分：前端和后端</p>
                        </div>
                        <div className={styles.introContent}>
                            <p>前端部分</p>
                            <ul>
                                <li>通过RPC方式去发送HTTP请求, 方便解耦</li>
                                <li>支持GET, HEAD, POST等所有请求方法</li>
                                <li>支持Spring和Springboot集成</li>
                                <li>JSON字符串到Java对象的自动化解析</li>
                                <li>XML文本到Java对象的自动化解析</li>
                                <li>支持灵活的模板表达式</li>
                                <li>支持拦截器处理请求的各个生命周期</li>
                                <li>支持自定义注解</li>
                            </ul>
                        </div>
                        <div className={styles.introContent}>
                            <p>后端部分</p>
                            <ul>
                                <li>支持OkHttp3</li>
                                <li>支持Httpclient</li>
                            </ul>
                        </div>

                    </div>
                    <div className={clsx('col col--8')}>
                        <figure>
                            <img className={clsx("img_margin", "img_shadow")} src={architectureImgUrl} alt="architecture" />
                        </figure>
                    </div>
                </div>
            </div>
        </section>


          <section className={styles.intro_item}>
              <div className="container">
                  <div className="row">
                      <div className={clsx('col col--8')}>
                          <figure>
                              <img className={clsx("img_margin", "img_shadow")} src={converterImgUrl} alt="converter" />
                          </figure>
                      </div>

                      <div className={clsx('col col--4')}>
                          <div className={styles.introHeader}>
                              <h2>数据转换</h2>
                              <p className={styles.introGreenText}>Forest支持多种数据类型和Java对象互相转换</p>
                          </div>
                          <div className={styles.introContent}>
                              <p>内置数据转换器</p>
                              <ul>
                                  <li>JSON转换器</li>
                                  <li>XML转换器</li>
                                  <li>本文转换器</li>
                                  <li>二进制转换器</li>
                                  <li>自动探测转换类型</li>
                                  <li>自定义数据转换器</li>
                              </ul>
                          </div>
                          <div className={styles.introContent}>
                              <p>Forest数据转换特点</p>
                              <ul>
                                  <li>能自动对请求响应返回的数据进行反序列化</li>
                                  <li>能自动对要发送到HTTP请求的数据进行序列化</li>
                                  <li>无需明确定义数据类型，能自动探测选择合适的转换器</li>
                                  <li>若有特殊的数据类型，内置转换器无法满足，还允许自定义转换器</li>
                              </ul>
                          </div>

                      </div>
                  </div>
              </div>
          </section>

          <section className={styles.intro_item}>
              <div className="container">
                  <div className="row">
                      <div className={clsx('col col--4')}>
                          <div className={styles.introHeader}>
                              <h2>丰富的注解</h2>
                              <p className={styles.introGreenText}>Forest所有的请求定义都基于Java注解的声明方式</p>
                          </div>
                          <div className={styles.introContent}>
                              <p>使用注解的好处</p>
                              <ul>
                                  <li>声明式编程，无多余代码</li>
                                  <li>代码优雅，简洁易看懂</li>
                                  <li>容易上手，学习成本低</li>
                                  <li>方便HTTP接口的维护与管理</li>
                                  <li>能形成统一HTTP接口形式，方便开发者之间交流</li>
                              </ul>
                          </div>
                          <div className={styles.introContent}>
                              <p>Forest注解的特点</p>
                              <ul>
                                  <li>注解丰富，涵盖了HTTP请求的绝大部分功能</li>
                                  <li>扩展能力强大，可以自定义注解</li>
                              </ul>
                          </div>

                      </div>
                      <div className={clsx('col col--8')}>
                          <figure>
                              <img className={clsx("img_margin", "img_shadow")} src={annotationsImgUrl} alt="annotations" />
                          </figure>
                      </div>
                  </div>
              </div>
          </section>

          <section className={styles.links_item}>
              <div className="container">
                  <div className="row">
                      <div className={styles.linksHeader}>
                          <h2>友情链接</h2>
                          {/*<p className={styles.introGreenText}>其他优秀的开源项目/组织/站点</p>*/}
                      </div>
                  </div>
                  <div className="row">
                      <div className={styles.linksTitle}>
                          <p>开源平台和社区</p>
                      </div>
                  </div>
                  <div className={clsx('row', styles.linksLogo)}>
                      <div className={clsx('col col--3')}>
                      </div>
                      <div className={clsx('col col--2')}>
                          <a target="_blank" href="https://gitee.com">
                              <img src="img/links/gitee-logo.png" alt="Soul"/>
                          </a>
                      </div>
                      <div className={clsx('col col--2')}>
                          <a target="_blank" href="https://www.oschina.net">
                              <img src="img/links/oschina-logo.png" alt="Soul"/>
                          </a>
                      </div>
                      <div className={clsx('col col--2')}>
                          <a target="_blank" href="https://gitee.com/dromara">
                              <img src="img/links/dromara-logo.png" alt="Soul"/>
                          </a>
                      </div>
                  </div>

                  <div className="row">
                      <div className={styles.linksTitle}>
                          <p>Dromara组织项目</p>
                      </div>
                  </div>

                  <div className={clsx('row', styles.linksLogo)}>
                      <div className={clsx('col col--1')}>
                      </div>
                      <div className={clsx('col col--2')}>
                          <a target="_blank" href="https://gitee.com/dromara/hutool">
                              <img src="img/links/hutool-logo.png" alt="Hutool"/>
                          </a>
                      </div>
                      <div className={clsx('col col--2')}>
                          <a target="_blank" href="https://gitee.com/dromara/TLog">
                              <img src="img/links/tlog-logo.png" alt="Tlog"/>
                          </a>
                      </div>
                      <div className={clsx('col col--2')}>
                          <a target="_blank" href="https://gitee.com/dromara/myth">
                              <img src="img/links/myth-logo.png" alt="Myth"/>
                          </a>
                      </div>

                      <div className={clsx('col col--2')}>
                          <a target="_blank" href="https://gitee.com/dromara/Raincat">
                              <img src="img/links/raincat-logo.png" alt="Raincat"/>
                          </a>
                      </div>

                      <div className={clsx('col col--2')}>
                          <a target="_blank" href="https://gitee.com/dromara/hmily">
                              <img src="img/links/hmily-logo.png" alt="Hmily"/>
                          </a>
                      </div>

                  </div>

                  <div className={clsx('row', styles.linksLogo)}>
                      <div className={clsx('col col--1')}>
                      </div>
                      <div className={clsx('col col--2')}>
                          <a target="_blank" href="https://gitee.com/dromara/liteFlow">
                              <img src="img/links/liteflow-logo.png" alt="LiteFlow"/>
                          </a>
                      </div>
                      <div className={clsx('col col--2')}>
                          <a target="_blank" href="https://gitee.com/dromara/sa-token">
                              <img src="img/links/sa-token-logo.png" alt="SA-Token"/>
                          </a>
                      </div>
                      <div className={clsx('col col--2')}>
                          <a target="_blank" className={styles.cubicLogo}  href="https://gitee.com/dromara/sa-token">
                              <div className={styles.cubicLogoImg}>
                                  <img src="img/links/cubic-logo.svg" alt="SA-Token"/>
                              </div>
                              <strong className={styles.cubicLogoText}>Cubic</strong>
                          </a>
                      </div>
                      <div className={clsx('col col--2')}>
                          <a target="_blank" href="https://gitee.com/dromara/Jpom">
                              <img src="img/links/jpom-logo.png" alt="Jpom"/>
                          </a>
                      </div>
                      <div className={clsx('col col--2')}>
                          <a target="_blank" href="https://gitee.com/dromara/MaxKey">
                              <img src="img/links/maxkey-logo.png" alt="MaxKey"/>
                          </a>
                      </div>
                  </div>

                  <div className="row">
                      <div className={styles.linksTitle}>
                          <p>友情开源项目</p>
                      </div>
                  </div>

                  <div className={clsx('row', styles.linksLogo)}>
                      <div className={clsx('col col--5')}>
                      </div>
                      <div className={clsx('col col--2')}>
                          <a target="_blank" href="https://uniadmin.jiangruyi.com">
                              <img src="img/links/uniadmin-logo.png" alt="uniadmin"/>
                          </a>
                      </div>
                  </div>
              </div>
          </section>
      </main>
    </Layout>
            </>
  );
}




export default Home;
